<script setup>
import { ref } from 'vue'
import defaultImage from '@/assets/logo.png'
import { useRouter } from 'vue-router'
import { useFullscreen } from '@vueuse/core'
import { saveAs } from 'file-saver'
import { weiboShare } from './share'
import { message } from '@/libs/Message/Mesaage'
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
})
const router = useRouter()
const imgRef = ref(null)
const { enter: onImgFullScreen } = useFullscreen(imgRef)
const onFullClick = () => {
  onImgFullScreen(imgRef)
}
const onDownloadClick = () => {
  saveAs(props.item.photoDownLink)
}
const onShareClick = () => {
  weiboShare(
    props.item.photo,
    `https://imooc-front.lgdsunday.club/pins/${props.item.id}`
  )
}
const onHeartClick = () => {
  message('功能开发中')
}
// 点击跳转details
const emits=defineEmits(['goDetails'])
const goDetail = () => {
  // console.log(props.item.id)
  emits('goDetails',props.item)
  // router.push(`/pins/${props.item.id}`)

}
</script>
<template>
  <div @click="goDetail">
    <div class="img group relative cursor-zoom-in">
      <!-- <img 
        :src="defaultImage" 
        ref="imgRef" 
        v-lazy="item.photo" 
        alt="item-image"
      /> -->
      <img :src="item.photo || defaultImage" ref="imgRef"   />
      <!-- <LazyImg :url="item.photo || defaultImage" /> -->
      <div
        class="p-2 hidden w-full h-full bg-zinc-900/50 absolute top-0 left-0 rounded duration-500 group-hover:block"
      >
        <Button class="absolute left-2" @click.stop="onShareClick">分享</Button>
        <Button
          icon="heart"
          class="absolute right-2"
          @click.stop="onHeartClick"
        ></Button>
        <Button
          icon="download"
          class="absolute left-2 bottom-2"
          @click.stop="onDownloadClick"
        ></Button>
        <Button
          icon="full"
          class="absolute right-2 bottom-2"
          @click.stop="onFullClick"
        ></Button>
      </div>
    </div>
    <div class="title font-bold">{{ item.title }}</div>
    <div class="author flex items-center">
      <img :src="item.avatar" class="w-8 mr-2" />
      <div>{{ item.author }}</div>
    </div>
  </div>
</template>
<style scoped></style>
